import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import {Column} from '@ant-design/plots';

const DemoColumn = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    setData([
        {univ_name: '南昌航空大学', award_ltype: '国家级教学成果奖', count: 40},
        {univ_name: '东华理工大学', award_ltype: '国家级教学成果奖', count: 39},
        {univ_name: '南昌大学', award_ltype: '国家级教学成果奖', count: 34},
        {univ_name: '江西理工大学', award_ltype: '国家级教学成果奖', count: 34},
        {univ_name: '南昌大学', award_ltype: '省级教学成果奖', count: 40},
        {univ_name: '华东交通大学', award_ltype: '省级教学成果奖', count: 34},
        {univ_name: '南昌航空大学', award_ltype: '省级教学成果奖', count: 32},
        {univ_name: '华东交通大学', award_ltype: '省级教学成果奖', count: 35},
        {univ_name: '江西理工大学', award_ltype: '省级教学成果奖', count: 39},
        {univ_name: '东华理工大学', award_ltype: '省级教学成果奖', count: 32}
      ]
    )
  };
  const config = {
    data,
    // isStack: true,
    isGroup: true,
    xField: 'univ_name',
    yField: 'count',
    seriesField: 'award_ltype',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    legend: {
      position: 'top',
    },
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    legend: {
      itemName: {style: {fontSize: 18}},
    }
  };

  return <Column {...config} />;
};


export default DemoColumn
